<form [formGroup]="form">
  <vertical-timeline class="time-line">
    <ng-container formArrayName="events" *ngFor="let event of formData.controls; let i=index">
      <ng-container [formGroupName]="i">
        <vertical-timeline-card
          [color]="event.value?.color"
          [dateValue]="event.value?.date"
          [timeString]="event.value?.date | date: 'yyyy.MM'">

          <button type="button" mat-mini-fab color="warn"
                  *ngIf="form.controls.events.controls.length > 1"
                  (click)="removeUnit(i)">
            删除
          </button>

          <mat-form-field class="pdp-timeline-color">
            <input type="color" matInput formControlName="color" required>
          </mat-form-field>

          <mat-form-field class="pdp-timeline-date">
            <input type="date" matInput formControlName="date" required>
          </mat-form-field>

          <mat-form-field class="pdp-timeline-content">
            <textarea type="text" matInput placeholder="标题" formControlName="content" required>
            </textarea>
          </mat-form-field>
        </vertical-timeline-card>
      </ng-container>
    </ng-container>
  </vertical-timeline>

  <button mat-mini-fab color="warn" type="button" color="primary" (click)="addUnit()">
    <mat-icon>add box</mat-icon>
  </button>
</form>
